<template>
  <div class="select-data-container" style="width: 100%">
    <div class="select-box" style="width: 100%">
      <el-select
        :value="showName || companyName"
        v-bind="$attrs"
        :disabled="true"
        style="display: block;width: 100%"/>
      <i
        class="icon el-icon-search active-search-icon"
        v-show="!isDisabled"
        @click="dialogVisible = true"
      ></i>
    <el-dialog
      title="公司列表"
      :visible.sync="dialogVisible"
      width="600">
      <el-form :model="companyParams" ref="queryForm" :inline="true">
        <el-form-item label="公司名称" prop="buildType">
          <el-input
            v-model="companyParams.companyName"
            placeholder="请输入公司名称"
            clearable
            size="small"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getCompanyData">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetCompany">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        size="mini"
        style="width: 100%">
        <el-table-column
          prop="companyName"
          label="公司名称">
        </el-table-column>
        <el-table-column
          prop="linkAddress"
          label="联系地址"
          >
        </el-table-column>
        <el-table-column
          prop="linkPerson"
          label="联系人"
          width="180">
        </el-table-column>

        <el-table-column label="操作" prop="status" align="center" width="150" >
          <template slot-scope="scope">
            <el-link type="primary"  @click="handelClick(scope.row)">使用</el-link>
          </template>
        </el-table-column>

      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="companyParams.pageNum"
        :limit.sync="companyParams.pageSize"
        @pagination="getCompanyData"
      />
    </el-dialog>

    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "loadingSearchFormCompany",
    components: {},
    directives: {},
    filters: {},
    mixins: [],
    model: {},
    props: {
      companyName: {
        type: String,
        default:''
      },

      isDisabled: {
        type: Boolean,
        default:false
      },
    },
    data() {
      return {
        dialogVisible:false,
        tableData:[],
        showName:'',
        companyParams:{
          pageSize:10,
          pageNum:1,
          companyName:''
        },
        total:0
      }
    },
    computed: {

    },
    watch: {
    },
    created() {
      this.getCompanyData();
      this.showName = this.companyName
    },
    methods: {
      resetCompany(){
        this.companyParams = {
          pageSize:10,
          pageNum:1,
          companyName:''
        }
        this.getCompanyData()
      },
      getCompanyOptions() {
        return request({
          url: `/base-company/pageList`,
          method: 'post',
          data: {...this.companyParams}
        })
      },
      getCompanyData(){
        this.getCompanyOptions().then(
          response => {
            if(response && response.code ===0){
              this.tableData = response.data.records
              this.total = response.data.total
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        );
      },
      handelClick(row){
        this.$emit('changeCom',{name:row.companyName,id:row.id})
        this.showName = row.companyName
        this.dialogVisible = false
      }
    },
  }
</script>

<style scoped lang="scss">
  .active-search-icon{
    color: #1890ff !important;
    font-weight: bold;
  }
  .active-search-icon :hover{
    color: #1890ff22 !important;
    font-weight: bold;
  }
  .select-data-container {
    position: relative;
    ::v-deep .el-input {
      &:hover {
        cursor: pointer;
      }
      input {
        &:hover {
          cursor: pointer;
        }
      }
    }
    .select-box {
      position: relative;
      .icon {
        cursor: pointer;
        color: #c0c4cc;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    ::v-deep .el-select {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      .el-input__suffix {
        display: none;
        .el-icon-arrow-up {
          display: none;
        }
      }
      &:hover .el-input__suffix {
        display: inline;
        margin-right: 16px;
      }
    }
    ::v-deep .is-disabled .el-input__inner {
      color: #4d4d4d;
    }


  }
  .select-tree {
    display: none;
  }
</style>
